/**
 * 学习目标：使用子传父技术-通信
 * 步骤：
 * 1. 在父组件中准备一个函数
 * 2. 将函数通过props，传给子组件
 * 3. 在子组件内，通过props.语法找到对应的函数
 * 4. 在组件内，通过()的方式，直接调用函数, 可以直接传参
 */
import React from 'react';
import ReactDOM from 'react-dom';

class Child extends React.Component {
  handleChildCost = () => {
    //  3. 在子组件内，通过props.语法找到对应的函数
    //  4. 在组件内，通过()的方式，直接调用函数, 可以直接传参
    this.props.handleCost(1000);
  };

  render() {
    const { money } = this.props;

    return (
      <div>
        <h1>爸爸给我钱了： {money}</h1>
        <button onClick={this.handleChildCost}>点击我，儿子要花爸爸的钱了</button>
      </div>
    );
  }
}

class App extends React.Component {
  state = {
    money: 0,
  };

  handleMakeMoney = () => {
    this.setState({
      money: 1000 + this.state.money,
    });
  };

  // 1. 在父组件中准备一个函数
  handleCost = (num) => {
    this.setState({
      money: this.state.money - num,
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleMakeMoney}>爸爸开始赚钱了</button>
        {/* //  * 2. 将函数通过props，传给子组件 */}
        <Child money={this.state.money} handleCost={this.handleCost}></Child>
      </div>
    );
  }
}

ReactDOM.render(<App></App>, document.getElementById('root'));
